// 场景收入报表
<template>
    <div class="pageWrapper">
        <SearchBar class="form" @onSearch="handleSearch" @childFn="resetForm">
            <SearchBarItem label="报表统计时间：">
              <DatePicker type="month" ref="clearDatePicker" :options="options3" transfer v-model="searchData.time"  @on-change="searchTime" style="width: 200px" placeholder="请选择年月"></DatePicker>
            </SearchBarItem>
        </SearchBar>

        <Row class="handleBtn" v-if="costData && costData.length > 0">
            <Authc permissions="trade:settlement:cmb">
                <Button type="primary" @click="updateScene" :disabled="isDisabled">更新报表</Button>
            </Authc>
            <Authc permissions="trade:settlement:cmb">
                <Button type="primary" @click="getExportPdf">导出</Button>
            </Authc>
        </Row>

        <Tabs type="card" :animated="false" v-model="tabValue" @on-click="changeTabs">
            <TabPane v-for="item in tabList" :key="item.key" :label="item.value" :name="item.key">

                <Row class="noRepor" v-if="!costData">
                    <p>当前月份还未生成报表</p>
                    <Button type="primary" @click="updateScene">点击生成</Button>
                </Row>

                <Row class="reporBox" v-else>
                    <Row class="reporHeader">
                        <h3>{{item.value}}收入成本报表</h3>
                        <Col span="12">报表统计月份：{{ costData[0] ? (costData[0].createdDt).slice(0, 10) : '' }}</Col>
                        <Col class="textRight" span="12">报表生成日期：{{ costData[0] ? costData[0].createdDt : '' }}</Col>
                    </Row>
                    <Table :columns="costColumn" :data="costData" border></Table>
                    <Page class="scenePage" :total="pageList.total" :current="pageList.currentPage" :page-size="pageList.pageSize" show-elevator show-total show-sizer @on-change="handlePageChange" @on-page-size-change="handlePageSizeChange"/>
                </Row>
            </TabPane>
        </Tabs>

    </div>
</template>

<script>
import { Button, DatePicker, Row, Col, Table, Input, Select, Option, Tabs, TabPane, Message, Page } from "view-design";
import Authc from "@/components/Authc";
import SearchBar from "@/components/SearchBar";
import { namespace } from '../Module/sceneIncomeModule';
import util from "@/utils/util";

export default {
    name: "",
    components: {
        SearchBar,
        SearchBarItem: SearchBar.SearchBarItem,
        DatePicker,
        Button,
        Row,
        Col,
        Table,
        Authc,
        Input,
        Select,
        Option,
        Tabs,
        TabPane,
        Message,
        Page
    },
    data(){
        return {
            isDisabled: false,
          searchData: {},
          tabValue: '3',
          tabList: [
            {
              value: '门票场景',
              key: '3'
            },
            {
              value: '线路场景',
              key: '4'
            },
            {
              value: '酒店场景',
              key: '1'
            }
          ],
          /** 第一个表格配置 **/
          costColumn: [
              {
                  title: '结算周期',
                  key: 'verifiedTime',
                  align: "center",
                  minWidth: 90
              },
              {
                  title: '城市',
                  key: 'cityName',
                  align: "center",
                  minWidth: 150
              },
              {
                  title: '供应商',
                  key: 'organizationName',
                  align: "center",
                  minWidth: 220
              },
              {
                  title: '商户',
                  key: 'merchantName',
                  align: "center",
                  minWidth: 180
              },
              {
                  title: '合作模式',
                  key: 'settlementType',
                  align: "center",
                  minWidth: 90
              },
              {
                  title: '商品',
                  key: 'productName',
                  align: "center",
                  minWidth: 200
              },
              {
                  title: '发票类型',
                  key: 'invoiceType',
                  align: "center",
                  minWidth: 150
              },
              {
                  title: '销售价格(￥)',
                  key: 'sell_price',
                  align: "center",
                  minWidth: 100,
                  render: (h, params) => {
                      return h('span', params.row.sell_price / 100)
                  }
              },
              {
                  title: '手续费(￥)',
                  key: 'process_cost',
                  align: "center",
                  minWidth: 100,
                  render: (h, params) => {
                      return h('span', params.row.process_cost / 100)
                  }
              },
              {
                  title: '结算价格(￥)',
                  key: 'costPrice',
                  align: "center",
                  minWidth: 100,
                  render: (h, params) => {
                      return h('span', params.row.costPrice / 100)
                  }
              },
              {
                  title: '税率(%)',
                  key: 'taxRate',
                  align: "center",
                  minWidth: 100,
                  render: (h, params) => {
                      return h('span', params.row.taxRate + '%')
                  }
              },
              {
                  title: '平台服务费(￥)',
                  key: 'plat_service',
                  align: "center",
                  minWidth: 100,
                  render: (h, params) => {
                      return h('span', params.row.plat_service / 100)
                  }
              },
              {
                  title: '不含税成本(￥)',
                  key: 'no_tax_cost',
                  align: "center",
                  minWidth: 100,
                  render: (h, params) => {
                      return h('span', params.row.no_tax_cost / 100)
                  }
              },
              {
                  title: '税额(¥)',
                  key: 'tax_amount',
                  align: "center",
                  minWidth: 80,
                  render: (h, params) => {
                      return h('span', params.row.tax_amount / 100)
                  }
              },
              {
                  title: '起始日',
                  key: 'contractStartDate',
                  align: "center",
                  minWidth: 120
              },
              {
                  title: '截止日',
                  key: 'contractEndDate',
                  align: "center",
                  minWidth: 120
              },
          ],
          /** 第一个表格数据 **/
          costData: [],
          pageList: {},
          options3: {
              disabledDate (date) {
                let nowTime = new Date()
                let month = nowTime.getMonth() + 1
                let year = nowTime.getFullYear()
                return date && date.valueOf() > new Date(`${year}-${month}`);
            }
          }
        }
    },
    created () {
        this.getSceneList();
    },
    methods: {

        /** 导出 */
        async getExportPdf () {
            try {
                if (!this.searchData.date) {
                    this.$Message.warning('请选择报表时间');
                    return;
                }
                let params = {
                    orderSource: this.tabValue
                }
                let item = this.tabList.find(e => e.key === this.tabValue).value;
                let res = await this.$store.dispatch(`${namespace}/exportPdf`, { ...params, ...this.searchData });

                util.exportExcle(res, `${item}收入报表${this.searchData.date}`);

            } catch (error) {
                this.$Message.error({
                    content: error
                })
            }
        },

        /** 页码切换 */
        async handlePageChange(currentPage) {
            try {

                let params = {
                    currentPage: currentPage,
                    pageSize: this.pageList.pageSize,
                    date: this.searchData.date ? this.searchData.date : util.getYearMonth(),
                    orderSource: this.tabValue
                }
                let res = await this.$store.dispatch(`${namespace}/sceneList`, params);
                if (res.data.ret === 0) {
                    let data = res.data.data;
                    this.costData = data.list;
                    this.pageList = data.pagination;
                }
            } catch (error) {
                this.$Message.error({
                    content: error
                })
            }
        },

        /** 切换每页条数的回调 **/
        async handlePageSizeChange(size){
            try {
                let params = {
                    currentPage: this.pageList.currentPage,
                    pageSize: size,
                    date: this.searchData.date ? this.searchData.date : util.getYearMonth(),
                    orderSource: this.tabValue
                }
                let res = await this.$store.dispatch(`${namespace}/sceneList`, params);
                if (res.data.ret === 0) {
                    let data = res.data.data;
                    this.costData = data.list;
                    this.pageList = data.pagination;
                }
            } catch (error) {
                this.$Message.error({
                    content: error
                })
            }
        },

        /** 切换tabs */
        async changeTabs () {
            try {
                let params = {
                    currentPage: 1,
                    pageSize: 10,
                    date: this.searchData.date ? this.searchData.date : util.getYearMonth(),
                    orderSource: this.tabValue
                }
                let res = await this.$store.dispatch(`${namespace}/sceneList`, params);
                if (res.data.ret === 0) {
                    let data = res.data.data;
                    this.costData = data.list;
                    this.pageList = data.pagination;
                }
            } catch (error) {
                this.$Message.error({
                    content: error
                })
            }
        },

        /** 默认初始化获取list */
        async getSceneList () {
            try {
                let params = {
                    date: util.getYearMonth(),
                    orderSource: this.tabValue,
                    currentPage: 1,
                    pageSize: 10
                }
                let res = await this.$store.dispatch(`${namespace}/sceneList`, params);
                if (res.data.ret === 0) {
                    let data = res.data.data;
                    this.costData = data.list;
                    this.pageList = data.pagination;
                }
            } catch (error) {
                this.$Message.error({
                    content: error
                })
            }
        },

      // 范围统计
      searchTime (date, type) {
          this.searchData.date = date;
      },

      /** 生辰报表 -- 更新 */
      async updateScene () {
          try {
              if (!this.searchData.date) {
                    this.$Message.warning('请选择报表时间');
                    return;
                }
              let params = {
                  orderSource: this.tabValue
              }
              this.isDisabled = true;
              let res = await this.$store.dispatch(`${namespace}/updateSourcecost`, { ...this.searchData, ...params });
              if (res.data.ret === 0) {
            //       this.$Message.success({
            //           content: '操作成功'
            //       })
                this.isDisabled = false;
              }

              let pageItem = {
                    currentPage: 1,
                    pageSize: 10,
              }
              let ress = await this.$store.dispatch(`${namespace}/sceneList`, { ...pageItem, ...this.searchData, ...params });
              if (ress.data.ret === 0) {
                  if (!ress.data.data.list) {
                      this.$Message.warning({
                          content: `暂无${this.searchData.date}报表`
                      })
                  } else {
                      this.$Message.success({
                          content: '操作成功'
                      })
                  }
                let data = ress.data.data;
                this.costData = data.list;
                this.pageList = data.pagination;
              }
          } catch (error) {
                this.$Message.error({
                    content: error
                })
          }
      },

      /** 搜索 */
        async handleSearch() {
            try {
                if (!this.searchData.date) {
                    this.$Message.warning('请选择报表时间');
                    return;
                }
                var params = {
                    orderSource: this.tabValue,
                    currentPage: 1,
                    pageSize: 10
                }
                let res = await this.$store.dispatch(`${namespace}/sceneList`, { ...this.searchData, ...params });
                if (res.data.ret === 0) {
                    if (!res.data.data.list) {
                        this.$Message.warning({
                            content: `暂无${this.searchData.date}报表`
                        })
                    } else {
                        this.$Message.success({
                            content: '操作成功'
                        })
                    }
                    let data = res.data.data;
                    this.costData = data.list;
                    this.pageList = data.pagination;
                    }
            } catch (error) {
                this.$Message.error({
                    content: error
                })
            }
        },
      resetForm() {
        // this.$set(this.searchModule, 'merchantName', '');
        // this.$set(this.searchModule, 'scenario', '');
        this.$refs["clearDatePicker"].handleClear();
      }
    }
};
</script>
<style scoped>
.pageWrapper {
    padding: 10px;
}
.pageWrapper >>> .ivu-date-picker .ivu-picker-panel-body {
    display: block !important;
}
.pageWrapper >>> .ivu-tabs-bar{
    background: #fff !important;
}

.form,
.handleBtn,
.reporBox {
    padding: 10px;
    background-color: #fff;
}
/* .handleBtn {
    margin-bottom: 10px;
} */
.noRepor {
    height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.scenePage {
    text-align: right;
}
.reporHeader {
    margin-bottom: 10px;
}
.reporHeader h3 {
    height: 50px;
    line-height: 50px;
    font-size: 32px;
    text-align: center;
    margin-bottom: 10px;
}
.textRight {
    text-align: right;
}
.reporBox .ivu-table-wrapper {
    margin-bottom: 20px;
}
</style>
